<template>
  <div>
    <el-tabs v-model="activeName">
      <el-tab-pane label="供应商信息" name="1">
        <div class="search_box">
          <el-input
            v-model="searchcontent.name"
            placeholder="供应商名称"
          ></el-input>
          <el-button type="primary" @click="getList">搜索</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </div>
        <div class="export_box">
          <el-button type="primary" @click="visible = true">新增</el-button>
        </div>
        <el-table
          :data="tableData"
          style="width: 100%"
          :height="h"
          border
          v-loading="loading"
          element-loading-text="加载中"
          element-loading-spinner="el-icon-loading"
        >
          <el-table-column
            prop="name"
            label="单位名称"
            width="230"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="contact"
            label="联系人"
            width="120"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="phone"
            label="联系电话"
            width="120"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="address" label="联系地址" align="center">
          </el-table-column>
          <el-table-column prop="remark" label="备注" align="center">
          </el-table-column>
          <el-table-column label="操作" align="center" width="400">
            <template slot-scope="scope">
              <el-button type="text" @click="getList1(scope.row)"
                >应收/付款详情</el-button
              >
              <el-button type="text" @click="getList2(scope.row)"
                >收/付款记录</el-button
              >
              <el-button type="text" @click="getList3(scope.row)"
                >收/开发票记录</el-button
              >
              <el-button type="text" @click="showInfo(scope.row)"
                >租赁记录</el-button
              >

              <el-button type="text" @click="editData(scope.row)"
                >编辑</el-button
              >
              <el-button type="text" @click="delData(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="page_table">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="1"
            :page-sizes="[10, 20, 30, 100]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="searchcontent.total"
          >
          </el-pagination>
        </div>
        <!-- 录入 -->
        <el-dialog
          title="单位信息录入"
          :visible.sync="visible"
          width="450px"
          :before-close="handleClose"
        >
          <el-form :model="form" :rules="rules" ref="ruleForm">
            <el-form-item label="单位名称" prop="name">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="联系人" prop="contact">
              <el-input v-model="form.contact"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="phone">
              <el-input v-model="form.phone"></el-input>
            </el-form-item>
            <el-form-item label="联系地址" prop="address">
              <el-input
                v-model="form.address"
                type="textarea"
                :rows="3"
              ></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
              <el-input
                v-model="form.remark"
                type="textarea"
                :rows="3"
              ></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="handleClose">取 消</el-button>
            <el-button type="primary" @click="submitAdd">确 定</el-button>
          </span>
        </el-dialog>
      </el-tab-pane>
      <el-tab-pane label="租车记录" v-if="activeName == 2" name="2">
        <div class="search_box">
          <el-input
            v-model="searchcontent1.plate"
            placeholder="车牌"
          ></el-input>
          <el-date-picker
            v-model="searchcontent1.time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy/MM/dd"
          >
          </el-date-picker>
          <el-button type="primary" @click="getInfolist">搜索</el-button>
          <el-button style="margin-left: 10px" @click="resetInfolist"
            >重置</el-button
          >
        </div>
        <div class="export_box">
          <el-button type="primary" @click="printListData">导出数据</el-button>
        </div>
        <el-table
          :data="showInfoList"
          border
          style="width: 100%"
          :height="h"
          v-loading="loading"
          element-loading-text="加载中"
          element-loading-spinner="el-icon-loading"
        >
          <el-table-column
            prop="create_time"
            label="日期"
            align="center"
            width="160"
          >
            <template slot-scope="scope">
              <div>
                {{
                  !Array.isArray(scope.row.create_time)
                    ? scope.row.start_time
                    : `${scope.row.start_time} - ${scope.row.end_time}`
                }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="plate" label="车牌" align="center" width="120">
            <template slot-scope="scope">
              <div
                :style="{
                  color: scope.row.source == 1 ? '#67c23a' : '#f56c6c',
                }"
              >
                {{ scope.row.plate }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="specifications" label="规格" align="center">
          </el-table-column>

          <el-table-column prop="unit_price" label="单价" align="center">
          </el-table-column>
          <el-table-column prop="units" label="计量单位" align="center">
          </el-table-column>
          <el-table-column prop="agreed_time" label="额定工时" align="center">
          </el-table-column>
          <el-table-column prop="true_time" label="实际工时" align="center">
          </el-table-column>
          <el-table-column prop="price1" label="金额" align="center">
          </el-table-column>
          <el-table-column prop="overtime_unit" label="加班单价" align="center">
          </el-table-column>
          <el-table-column
            prop="overtime_hours"
            label="加班时长"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="overtime_price" label="加班费" align="center">
          </el-table-column>
          <el-table-column prop="other_price" label="其他费用" align="center">
          </el-table-column>
          <el-table-column
            prop="other_remark"
            label="其他费用说明"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="total_price"
            label="总金额"
            align="center"
            width="100"
          >
          </el-table-column>
          <el-table-column
            prop="content"
            label="工作内容"
            align="center"
            width="300"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column prop="operator" label="操作人员" align="center">
          </el-table-column>
          <el-table-column prop="lessee" label="承租单位" align="center">
          </el-table-column>
          <el-table-column prop="dispatcher" label="派车人员" align="center">
          </el-table-column>
          <el-table-column prop="company" label="派车单位" align="center">
          </el-table-column>
          <el-table-column
            prop="remark"
            label="备注"
            align="center"
            width="300"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="cost"
            fixed="right"
            label="用车成本"
            align="center"
          >
            <template slot-scope="scope">
              {{ Number(scope.row.cost).toFixed(4) }}
            </template>
          </el-table-column>
          <el-table-column
            prop="type"
            label="是否签单"
            align="center"
            fixed="right"
          >
            <template slot-scope="scope">
              <div
                :style="{
                  color: scope.row.is_bill1 == 1 ? '#67c23a' : '#f56c6c',
                }"
              >
                {{ scope.row.is_bill1 == 1 ? "已签单" : "未签单" }}
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="page_table">
          <span style="line-height: 35px; margin-right: 30px"
            >总金额:
            <span style="color: red">{{ price1.toFixed(4) }}</span></span
          >
          <span style="line-height: 35px; margin-right: 30px"
            >总成本:
            <span style="color: red">{{ price2.toFixed(4) }}</span></span
          >
          <el-pagination
            @size-change="handleSizeChange1"
            @current-change="handleCurrentChange1"
            :current-page="1"
            :page-sizes="[10, 20, 30, 100]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="searchcontent1.total"
          >
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="应收/付款详情" name="3" v-if="activeName == 3">
        <div>
          <div class="search_box">
            <el-select v-model="search1.item_type">
              <el-option value="1" label="收款"></el-option>
              <el-option value="2" label="付款"></el-option>
            </el-select>
            <el-date-picker
              v-model="search1.time"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy/MM/dd"
            >
            </el-date-picker>
            <el-button type="primary" @click="getList1(1)">搜索</el-button>
            <el-button @click="resetList1(1)">重置</el-button>
          </div>
          <div class="export_box">
            <el-button type="primary" @click="exportList1">导出数据</el-button>
          </div>
          <el-table :data="showlist1" border style="width: 100%" :height="h">
            <el-table-column
              prop="project_name"
              label="应收项目"
              align="center"
              width="200px"
            >
            </el-table-column>
            <el-table-column prop="" label="类型" align="center" width="80">
              <template slot-scope="scope">
                <span
                  :style="{ color: scope.row.item_type == 1 ? 'green' : 'red' }"
                >
                  {{ scope.row.item_type == 1 ? "应收款" : "应付款" }}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              prop="create_time"
              label="业务日期"
              align="center"
              width="120px"
            >
            </el-table-column>
            <el-table-column
              prop="abstract"
              label="业务摘要"
              align="center"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="total_price"
              label="应收金额"
              align="center"
              width="100px"
            >
              <template slot-scope="scope">
                {{ Number(scope.row.total_price || 0).toFixed(4) }}
              </template>
            </el-table-column>
            <!-- <el-table-column
              prop="income"
              label="已收金额"
              align="center"
              width="100px"
            >
              <template slot-scope="scope">
                {{ Number(scope.row.income || 0).toFixed(4) }}
              </template>
            </el-table-column> -->
            <el-table-column
              prop="payable"
              label="付款单位"
              align="center"
              width="200px"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="receivable"
              label="收款单位"
              align="center"
              width="200px"
              show-overflow-tooltip
            >
            </el-table-column>
            <!-- <el-table-column
              prop="invoicing"
              label="已开票金额"
              align="center"
              width="100px"
            >
            </el-table-column> -->
          </el-table>
          <div class="page_table">
            <span style="line-height: 35px; margin-right: 30px"
              >总应收:
              <span style="color: red">{{ price11.toFixed(4) }}</span></span
            >
            <span style="line-height: 35px; margin-right: 30px"
              >总应付:
              <span style="color: red">{{ price22.toFixed(4) }}</span></span
            >
            <el-pagination
              @size-change="list1SizeChange"
              @current-change="list1CurrentChange"
              :current-page="1"
              :page-sizes="[10, 20, 30, 50]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="search1.total"
            >
            </el-pagination>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="收/付款记录" name="4" v-if="activeName == 4">
        <div>
          <div class="search_box">
            <el-select v-model="search2.item_type">
              <el-option value="1" label="收款"></el-option>
              <el-option value="2" label="付款"></el-option>
            </el-select>
            <el-date-picker
              v-model="search2.time"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy/MM/dd"
            >
            </el-date-picker>
            <el-button type="primary" @click="getList2(1)">搜索</el-button>
            <el-button @click="resetList2(1)">重置</el-button>
          </div>
          <div class="export_box">
            <el-button type="primary" @click="exportList2">导出数据</el-button>
          </div>
          <el-table :data="showlist2" border style="width: 100%" :height="h">
            <el-table-column
              width="150"
              prop="project_name"
              label="收款项目"
              align="center"
            >
            </el-table-column>
            <el-table-column prop="" label="类型" align="center" width="80">
              <template slot-scope="scope">
                <span
                  :style="{ color: scope.row.item_type == 1 ? 'green' : 'red' }"
                >
                  {{ scope.row.item_type == 1 ? "收款" : "付款" }}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              width="150"
              prop="create_time"
              label="收款日期"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="abstract"
              label="业务摘要"
              align="center"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="income_price"
              label="收款金额"
              align="center"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="account_name"
              label="收款账户"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="account_info"
              label="收款账号"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="payable"
              label="付款单位"
              align="center"
              width="200px"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="receivable"
              label="收款单位"
              align="center"
              width="200px"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column prop="handler" label="操作人" align="center">
            </el-table-column>
            <el-table-column prop="income_remark" label="备注" align="center">
            </el-table-column>
          </el-table>
          <div class="page_table">
            <span style="line-height: 35px; margin-right: 30px"
              >总已收:
              <span style="color: red">{{ price3.toFixed(4) }}</span></span
            >
            <span style="line-height: 35px; margin-right: 30px"
              >总已付:
              <span style="color: red">{{ price4.toFixed(4) }}</span></span
            >
            <el-pagination
              @size-change="list2SizeChange"
              @current-change="list2CurrentChange"
              :current-page="1"
              :page-sizes="[10, 20, 30, 50]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="search2.total"
            >
            </el-pagination>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="收/开发票记录" name="5" v-if="activeName == 5">
        <div>
          <div class="search_box">
            <el-select v-model="search3.item_type">
              <el-option value="1" label="销项发票"></el-option>
              <el-option value="2" label="购项发票"></el-option>
            </el-select>
            <el-date-picker
              v-model="search3.time"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy/MM/dd"
            >
            </el-date-picker>
            <el-button type="primary" @click="getList3(1)">搜索</el-button>
            <el-button @click="resetList3(1)">重置</el-button>
          </div>
          <div class="export_box">
            <el-button type="primary" @click="exportList3">导出数据</el-button>
          </div>
          <el-table :data="showlist3" border style="width: 100%" :height="h">
            <el-table-column
              prop="project_name"
              label="项目"
              align="center"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column prop="" label="类型" align="center" width="80">
              <template slot-scope="scope">
                <span
                  :style="{ color: scope.row.item_type == 1 ? 'green' : 'red' }"
                >
                  {{ scope.row.item_type == 1 ? "销项发票" : "购项发票" }}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              width="120"
              prop="create_time"
              label="日期"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="abstract"
              label="业务摘要"
              align="center"
              width="200px"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="payable"
              label="收票单位"
              align="center"
              width="200px"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="receivable"
              label="开票单位"
              align="center"
              width="200px"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="invoicing_price"
              label="开票金额"
              align="center"
            >
            </el-table-column>
            <el-table-column prop="taxrate" label="税率(%)" align="center">
            </el-table-column>
            <el-table-column
              prop="excluding_tax"
              label="不含税金额"
              align="center"
            >
            </el-table-column>
            <el-table-column prop="tax_amount" label="税额" align="center">
            </el-table-column>
            <el-table-column
              prop="invoice_type"
              label="发票类型"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="invoice_num"
              label="发票号码"
              align="center"
              width="100"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="invoice_code"
              label="发票代码"
              align="center"
              width="100"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="invoice_content"
              label="发票内容"
              align="center"
              width="200"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="invoice_date"
              label="交票日期"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="invoice_remark"
              label="备注"
              align="center"
              width="200"
              show-overflow-tooltip
            >
            </el-table-column>
          </el-table>
          <div class="page_table">
            <span style="line-height: 35px; margin-right: 30px"
              >总销项- 含税:
              <span style="color: red">{{ price5.toFixed(4) }}</span>
              不含税:
              <span style="color: red">{{ price7.toFixed(4) }}</span>
              税额:
              <span style="color: red">{{ price8.toFixed(4) }}</span></span
            >
            <span style="line-height: 35px; margin-right: 30px"
              >总购项- 含税:
              <span style="color: red">{{ price6.toFixed(4) }}</span>
              不含税:
              <span style="color: red">{{ price9.toFixed(4) }}</span>
              税额:
              <span style="color: red">{{ price10.toFixed(4) }}</span></span
            >
            <el-pagination
              @size-change="list3SizeChange"
              @current-change="list3CurrentChange"
              :current-page="1"
              :page-sizes="[10, 20, 30, 50]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="search3.total"
            >
            </el-pagination>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>

    <!-- <el-dialog
      title="租车记录表"
      :visible.sync="showInfoVisible"
      width="80%"
      :before-close="closeShowInfo"
    >
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeShowInfo">关闭</el-button>
      </span>
    </el-dialog> -->
  </div>
</template>

<script>
import { getDataByKey, openDB, changeDB, deleteDB, editDB } from "@/db/indexdb";
import { searchTable } from "@/db/search";
import { printData } from "@/db/print";

export default {
  data() {
    return {
      activeName: "1",
      visible: false,
      form: {},
      rules: {
        name: [{ required: true, message: "请输入单位名称", trigger: "blur" }],
        contact: [{ required: true, message: "请输入联系人", trigger: "blur" }],
        phone: [{ required: true, message: "请输入联系电话", trigger: "blur" }],
      },

      tableData: [],
      searchcontent: {
        name: "",
        page: 1,
        size: 10,
        total: 0,
      },
      searchcontent1: {
        plate: "",
        time: [],
        page: 1,
        size: 5000,
        total: 0,
      },
      keyword: "",
      showInfoList: [],
      showInfoList1: [],
      showInfoVisible: false,
      infoKeywords: [],
      edit: false,
      printList: [],
      h: "",
      loading: false,
      totalList: [],
      price1: 0,
      price2: 0,
      showlistAll1: [],
      showlist1: [],
      list_row: {},
      showlistAll2: [],
      showlist2: [],
      showlistAll3: [],
      showlist3: [],
      search1: {
        item_type: "",
        time: [],
        page: 1,
        size: 10,
        total: 0,
      },
      search2: {
        item_type: "",
        time: [],
        page: 1,
        size: 10,
        total: 0,
      },
      search3: {
        item_type: "",
        time: [],
        page: 1,
        size: 10,
        total: 0,
      },
      price11: 0,
      price22: 0,
      price3: 0,
      price4: 0,
      price5: 0,
      price6: 0,
      price7: 0,
      price8: 0,
      price9: 0,
      price10: 0,
    };
  },
  created() {
    this.getList();
    this.h = document.documentElement.offsetHeight - 320;
  },
  methods: {
    handleSelectionChange(val) {
      this.printList = val;
    },
    printListData() {
      let header = [
        { value: "create_time", label: "日期", first: 1 },
        { value: "company", label: "派车单位" },
        { value: "plate", label: "车牌" },
        { value: "car_tpe", label: "车型" },
        { value: "specifications", label: "规格" },
        { value: "cost", label: "用车成本", total: 1, type: "n" },
        { value: "units", label: "计量单位" },
        { value: "unit_price", label: "单价", type: "n" },
        { value: "agreed_time", label: "额定工时", type: "n" },
        { value: "true_time", label: "实际工时", type: "n" },
        { value: "price1", label: "金额", total: 1, type: "n" },
        { value: "overtime_unit", label: "加班单价", type: "n" },
        { value: "overtime_time", label: "加班时长", type: "n" },
        { value: "overtime_price", label: "加班费", total: 1, type: "n" },
        {
          value: "other_price",
          label: "其他费用(收客户)",
          total: 1,
          type: "n",
        },
        { value: "other_remark", label: "其他费用说明(收客户)" },
        { value: "total_price", label: "合计金额", total: 1, type: "n" },
        {
          value: "other1_price",
          label: "其他费用(应收供应商)",
          total: 1,
          type: "n",
        },
        { value: "other1_remark", label: "费用说明(应收供应商)" },
        {
          value: "other2_price",
          label: "其他费用(应付客户)",
          total: 1,
          type: "n",
        },
        { value: "other2_remark", label: "费用说明(应付客户)" },
        { value: "content", label: "工作内容" },
        { value: "remark", label: "说明" },
      ];
      let msg = {
        msg1: "车辆租用记录",
      };
      printData(msg, this.totalList, header);
    },
    editData(row) {
      this.edit = true;
      this.visible = true;
      this.form = { ...row };
    },
    getList1(rows) {
      let row;
      if (rows == 1) {
        row = this.list_row;
      } else {
        row = rows;
        this.list_row = row;
      }
      getDataByKey("list", "收付款表").then((res) => {
        let result = res.data.filter((item) => {
          return item.payable_id == row.id || item.receivable_id == row.id;
        });
        let datas = { ...this.search1 };
        datas.item_type = Number(datas.item_type || 0);
        let { list, total, totalList } = searchTable(
          result,
          datas,
          3,
          "create_time"
        );
        this.showlistAll1 = totalList;
        this.showlist1 = list;
        this.search1.total = total;
        let price11 = 0;
        let price22 = 0;
        totalList.map((item) => {
          if (item.item_type == 1) {
            price11 = price11 + Number(item.total_price || 0);
          } else {
            price22 = price22 + Number(item.total_price || 0);
          }
        });
        this.price11 = price11;
        this.price22 = price22;
        this.activeName = "3";
      });
    },
    resetList1() {
      this.search1 = {
        item_type: "",
        time: [],
        page: 1,
        size: 10,
        total: 0,
      };
      console.log(this.list_row, "row");

      this.getList1(this.list_row);
    },
    exportList1() {
      let arr = [...this.showlistAll1];
      arr.map((item) => {
        item.pay_type = item.item_type == 1 ? "应收款" : "应付款";
      });
      let header = [
        { value: "project_name", label: "项目名", first: 1 },
        { value: "pay_type", label: "类型" },
        { value: "create_time", label: "业务日期" },
        { value: "abstract", label: "业务摘要" },
        { value: "total_price", label: "金额", type: "n", total: 1 },
        { value: "payable", label: "付款单位" },
        { value: "receivable", label: "收款单位" },
      ];
      let msg = {
        msg1: "客户应收/付款",
      };
      printData(msg, arr, header);
    },
    list1SizeChange(val) {
      this.search1.size = val;
      this.getList1(this.list_row);
    },
    list1CurrentChange(val) {
      this.search1.page = val;
      this.getList1(this.list_row);
    },
    getList2(rows) {
      let row;
      if (rows == 1) {
        row = this.list_row;
      } else {
        row = rows;
        this.list_row = row;
      }
      getDataByKey("list", "收付款记录表").then((res) => {
        let result = res.data.filter((item) => {
          return item.payable_id == row.id || item.receivable_id == row.id;
        });
        let datas = { ...this.search2 };
        datas.item_type = Number(datas.item_type || 0);
        let { list, total, totalList } = searchTable(
          result,
          datas,
          1,
          "create_time"
        );
        this.showlistAll2 = totalList;
        this.showlist2 = list;
        this.search2.total = total;
        this.activeName = "4";
        let price3 = 0;
        let price4 = 0;
        totalList.map((item) => {
          if (item.item_type == 1) {
            price3 = price3 + Number(item.income_price || 0);
          } else {
            price4 = price4 + Number(item.income_price || 0);
          }
        });
        this.price3 = price3;
        this.price4 = price4;
      });
    },
    resetList2() {
      this.search2 = {
        item_type: "",
        time: [],
        page: 1,
        size: 10,
        total: 0,
      };
      this.getList2(this.list_row);
    },
    exportList2() {
      let arr = [...this.showlistAll2];
      arr.map((item) => {
        item.pay_type = item.item_type == 1 ? "收款" : "付款";
      });
      let header = [
        { value: "project_name", label: "项目名", first: 1 },
        { value: "pay_type", label: "类型" },
        { value: "create_time", label: "日期" },
        { value: "abstract", label: "业务摘要" },
        { value: "income_price", label: "金额", type: "n", total: 1 },
        { value: "account_name", label: "账户" },
        { value: "account_info", label: "账号" },
        { value: "payable", label: "付款单位" },
        { value: "receivable", label: "收款单位" },
        { value: "handler", label: "操作人" },
        { value: "income_remark", label: "备注" },
      ];
      let msg = {
        msg1: "客户已收/付款记录",
      };
      printData(msg, arr, header);
    },
    list2SizeChange(val) {
      this.search2.size = val;
      this.getList2(this.list_row);
    },
    list2CurrentChange(val) {
      this.search2.page = val;
      this.getList2(this.list_row);
    },
    getList3(rows) {
      let row;
      if (rows == 1) {
        row = this.list_row;
      } else {
        row = rows;
        this.list_row = row;
      }
      getDataByKey("list", "发票登记表").then((res) => {
        let result = res.data.filter((item) => {
          return item.payable_id == row.id || item.receivable_id == row.id;
        });
        let datas = { ...this.search3 };
        datas.item_type = Number(datas.item_type || 0);
        let { list, total, totalList } = searchTable(
          result,
          datas,
          1,
          "create_time"
        );
        console.log(list, "list");
        this.showlistAll3 = totalList;
        this.showlist3 = list;
        this.search3.total = total;
        this.activeName = "5";
        let price5 = 0;
        let price6 = 0;
        let price7 = 0;
        let price8 = 0;
        let price9 = 0;
        let price10 = 0;
        totalList.map((item) => {
          if (item.item_type == 1) {
            price5 = price5 + Number(item.invoicing_price || 0);
            price7 = price7 + Number(item.excluding_tax || 0);
            price8 = price8 + Number(item.tax_amount || 0);
          } else {
            price6 = price6 + Number(item.invoicing_price || 0);
            price9 = price9 + Number(item.excluding_tax || 0);
            price10 = price10 + Number(item.tax_amount || 0);
          }
        });
        this.price5 = price5;
        this.price6 = price6;
        this.price7 = price7;
        this.price8 = price8;
        this.price9 = price9;
        this.price10 = price10;
      });
    },
    resetList3() {
      this.search3 = {
        item_type: "",
        time: [],
        page: 1,
        size: 10,
        total: 0,
      };
      this.getList3(this.list_row);
    },
    exportList3() {
      let arr = [...this.showlistAll3];
      arr.map((item) => {
        item.pay_type = item.item_type == 1 ? "销项发票" : "购项发票";
        item.taxrate = Number(item.taxrate || 0) / 100;
      });
      let header = [
        { value: "project_name", label: "项目名", first: 1 },
        { value: "pay_type", label: "类型" },
        { value: "create_time", label: "日期" },
        { value: "abstract", label: "业务摘要" },
        { value: "payable", label: "收票单位" },
        { value: "receivable", label: "开票单位" },
        { value: "invoicing_price", label: "开票金额", type: "n", total: 1 },
        { value: "taxrate", label: "税率", type: "n" },
        { value: "excluding_tax", label: "不含税金额", type: "n", total: 1 },
        { value: "tax_amount", label: "税额", type: "n", total: 1 },
        { value: "invoice_type", label: "发票类型" },
        { value: "invoice_num", label: "发票号码" },
        { value: "invoice_code", label: "发票代码" },
        { value: "invoice_content", label: "发票内容" },
        { value: "invoice_remark", label: "备注" },
      ];
      let msg = {
        msg1: "客户收/开发票记录",
      };
      printData(msg, arr, header);
    },
    list3SizeChange(val) {
      this.search3.size = val;
      this.getList3(this.list_row);
    },
    list3CurrentChange(val) {
      this.search3.page = val;
      this.getList3(this.list_row);
    },
    getList() {
      this.loading = true;
      openDB("car", "list")
        .then(() => {
          getDataByKey("list", "供应商表")
            .then((res) => {
              let { total, list, totalList } = searchTable(
                res.data,
                this.searchcontent,
                1
              );
              this.searchcontent.total = total;
              this.tableData = list;

              this.loading = false;
            })
            .catch((err) => {
              this.$message.error(err);
              this.loading = false;
            });
        })
        .catch((err) => {
          this.$message.error(err);
          this.loading = false;
        });
    },
    resetSearch() {
      (this.searchcontent = {
        name: "",
        page: 1,
        size: 10,
        total: 0,
      }),
        this.getList();
    },
    handleSizeChange(val) {
      this.searchcontent.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.searchcontent.page = val;
      this.getList();
    },
    handleSizeChange1(val) {
      this.searchcontent1.size = val;
      this.getInfolist();
    },
    handleCurrentChange1(val) {
      this.searchcontent1.page = val;
      this.getInfolist();
    },
    submitAdd() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          let data = { ...this.form };
          if (this.edit) {
            editDB("list", "供应商表", data)
              .then(() => {
                this.$message.success("修改成功");
                this.handleClose();
                this.getList();
              })
              .catch((err) => {
                this.$message.error(err);
                this.loading = false;
              });
          } else {
            data.id = new Date().getTime();
            changeDB("list", "供应商表", data)
              .then(() => {
                this.$message.success("添加成功");
                this.handleClose();
                this.getList();
              })
              .catch((err) => {
                this.$message.error(err);
                this.loading = false;
              });
          }
          this.edit = false;
        } else {
          return false;
        }
      });
    },
    handleClose() {
      this.visible = false;
      this.form = {};
    },
    delData(id) {
      this.$confirm("确定删除该条数据吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteDB("list", "供应商表", id)
            .then(() => {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.getList();
              this.visible = false;
            })
            .catch((err) => {
              this.$message.error(err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    closeShowInfo() {
      this.showInfoList = [];
      this.showInfoVisible = false;
    },
    resetInfolist() {
      this.searchcontent1 = {
        plate: "",
        time: [],
        page: 1,
        size: 5000,
        total: 0,
      };
      this.getInfolist();
    },
    getInfolist() {
      let { total, list, totalList } = searchTable(
        this.showInfoList1,
        this.searchcontent1,
        1
      );
      this.totalList = totalList;
      this.searchcontent1.total = total;
      this.showInfoList = list;
      let price1 = 0;
      let price2 = 0;
      totalList.map((item) => {
        price1 = price1 + Number(item.total_price || 0);
        price2 = price2 + Number(item.cost || 0);
      });
      this.price1 = price1;
      this.price2 = price2;
    },
    showInfo(row) {
      this.activeName = "2";
      this.loading = true;
      getDataByKey("list", "出车记录表")
        .then((res) => {
          this.showInfoList1 = res?.data.filter((item) => {
            return item.source == 2 && item.company_id == row.id;
          });
          this.getInfolist();
          this.loading = false;
        })
        .catch((err) => {
          this.$message.error(err);
          this.loading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.search_box {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #ccc;
  .el-input,
  .el-select {
    width: 200px;
    margin-right: 20px;
    margin-bottom: 20px;
  }
  .el-date-editor {
    margin-right: 20px;
    margin-bottom: 20px;
  }
  .el-button {
    margin-bottom: 20px;
  }
}
.export_box {
  display: flex;
  justify-content: flex-end;
  margin: 10px 0;
}
.page_table {
  margin-top: 20px;
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
</style>
